<template>
	
	<view class="bind-page">
		<!-- 信息表单 -->
		<form class="info-list" :model="userDetails" >
			<view class="info-item">
				<text class="item-label">姓名</text>
				<input class="item-input" v-model="userDetails.realname" type="text" placeholder="填写支付宝收款姓名" />
			</view>
			<view class="info-item">
				<text class="item-label">身份证号</text>
				<input class="item-input" type="text" v-model="userDetails.card" placeholder="填写身份证号" />
			</view>
		</form>

		<!-- 绑定按钮 -->
		<view class="bind-btn-box">
			<button class="bind-btn" @click="onSubmit">绑定</button>
		</view>

		<!-- 注意事项 -->
		<view class="notice-box">
			<view class="notice-title">注意事项：</view>
			<view class="notice-content">
				收款支付宝账号绑定的身份信息需与实名认证填写的信息一致，否则提现无法发放奖励
			</view>
		</view>
	</view>
</template>
<script setup>
	import { ref,reactive } from "vue"
	import { onLoad } from '@dcloudio/uni-app';
	import { updataMember } from '@/api/member.js';

	import { useUserStore } from '@/store/userStore';

	const userStore = useUserStore();

	const userDetails = reactive({
		id:0,
		avatar: '',
		nickname: '',
		card: '',
		alipay_account: '',
		realname:''
	});
	onLoad((options) => {
		Object.assign(userDetails, {
			avatar: userStore.userDetails?.avatar || '',
			nickname: userStore.userDetails?.nickname || '',
			card: userStore.userDetails?.card || '',
			alipay_account: userStore.userDetails?.alipay_account || '',
			realname:userStore.userDetails?.realname || ''
		});
		console.log("Received URL parameters:", options);
		// You can use the params to update userDetails or perform other actions
	});

	const onSubmit = async()=>{
		let result = await updataMember(userDetails).then(res=>{
			uni.showToast({ title: '绑定成功', icon: 'success' });
			console.log("绑定成功")
			console.log(userDetails)
			userStore.updateUserDetails(userDetails);
			setTimeout(() => {
				goBack();
			}, 2000);
		})
	}

	function goBack() {
		//uni.navigateBack();
		uni.navigateBack({
		    success: () => {
		      const pages = getCurrentPages();
		      const prevPage = pages[pages.length - 1]; // 获取上一页实例
		      if (prevPage && prevPage.$vm.onLoad) {
		        prevPage.$vm.onLoad(); // 强制刷新上一页
		      }
		    }
		  });
	}
</script>

<style scoped>
.bind-page {
	min-height: 100vh;
	background: #f6f7fb;
	display: flex;
	flex-direction: column;
}
.info-list {
	background: #fff;
	border-radius: 0 0 20rpx 20rpx;
	margin-bottom: 32rpx;
	margin-top: 2rpx;
}
.info-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 32rpx;
	height: 90rpx;
	border-bottom: 2rpx solid #f2f2f2;
}
.info-item:last-child {
	border-bottom: none;
}
.item-label {
	font-size: 28rpx;
	color: #222;
	width: 140rpx;
}
.item-input {
	flex: 1;
	text-align: right;
	font-size: 26rpx;
	color: #222;
	border: none;
	background: transparent;
	outline: none;
}
.bind-btn-box {
	width: 80vw;
	max-width: 600rpx;
	margin: 32rpx auto 0 auto;
}
.bind-btn {
	width: 100%;
	height: 90rpx;
	background: #4a90e2;
	color: #fff;
	font-size: 32rpx;
	border-radius: 60rpx;
	border: none;
	font-weight: bold;
	box-shadow: 0 4rpx 16rpx rgba(74,144,226,0.10);
}
.notice-box {
	background: #fff;
	margin: 32rpx 24rpx 0 24rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
	padding: 18rpx 20rpx 20rpx 20rpx;
}
.notice-title {
	font-size: 26rpx;
	color: #222;
	font-weight: bold;
	margin-bottom: 10rpx;
}
.notice-content {
	font-size: 24rpx;
	color: #666;
	line-height: 1.7;
}
.back-icon {
	font-size: 40rpx;
	color: #fff;

}
.back-icon image{
	width: 40rpx;
	height: 40rpx;
}
</style>
